<template>
    <el-dialog :title="isAdd ? '新增字典' : '修改字典'" :visible.sync="dialogFormVisible" @close="onClose">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
            <el-form-item label="字典名称" prop="dictKey">
                <el-input v-model="ruleForm.dictKey"></el-input>
            </el-form-item>
            <el-form-item label="字典值">
                <el-input v-model="ruleForm.dictValue"></el-input>
            </el-form-item>
            <el-form-item label="字典描述">
                <el-input v-model="ruleForm.description"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="ruleForm.note"></el-input>
            </el-form-item>
            <el-form-item style="align-items: right;">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
import { dictAPI } from '@/http'
export default {
    name: 'dictData-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            msg: 'userData-page',
            ruleForm: {},
            dialogFormVisible: false,
            rules: {
                dictKey: [
                    { required: true, message: '请输入字典名称', trigger: 'blur' },
                ],
            },
            props: {
                checkStrictly: true,
                value: 'id',
                label: 'name',
                children: 'subDepts',
                emitPath: false,
            },
            roleList: [],
            options: [],
            isHandler: false,
            isAdd: true,
        }
    },
    created() {
        this.getRole()
        this.getDept()
    },
    methods: {
        onClose() {
            this.$emit('close', this.isHandler)

        },
        open(id) {
            if (id) {
                this.isAdd = false;
                dictAPI.getDateInfo(id).then(res => {
                    if (res.code === 200) {
                        console.log('数据:', res.data);
                        this.ruleForm = res.data
                    }
                })
            }
            this.dialogFormVisible = true;
        },
        submitForm() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    let params = Object.assign({}, this.ruleForm)
                    console.log('提交的数据：', params);
                    let ParamAPI = this.isAdd ? 'createFn' : 'upDataAPI'
                    // upDataAPI
                    dictAPI[ParamAPI](params).then(res => {
                        // console.log('数据提交:', res);
                        if (res.code === 200) {
                            this.dialogFormVisible = false;
                            this.isHandler = true;
                            this.$message({
                                message: (this.isAdd ? '新增' : '修改') + '成功！',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            })
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    }
}
</script>

<style scoped></style>